<template>
	<view class="content">
		<scroll-view scroll-y="true" class="main" @scrolltolower="more">
			<view class="zhan"></view>
			<view class="logo">
				<image src="../static/logo.png" mode="aspectFill"></image>
			</view>
			<view class="title">一点到家技师端</view>
			<view class="text">欢迎使用一点到家</view>
		</scroll-view>
		<view class="foot">
			<view @click="toLogin(0)" class="each-btn btn1 flex-center" :style="[{'background':colors.primary},{'box-shadow':`0px 10px 12px -5px ${primaryRgba}`}]">手机号验证码登陆</view>
			<view @click="toLogin(1)" class="each-btn btn2 flex-center" :style="[{'border':`1rpx solid ${colors.primary}`},{'color':colors.primary}]">账号密码登录</view>
			<view class="text" @click="toForgotPassword">没有账号？去注册</view>
			<up-safe-bottom></up-safe-bottom>
		</view>
	</view>
</template>

<script setup>
	const colors = ref('')
	onLoad(() => {
		colors.value = $use.colorObj()
	})
	const primaryRgba = $use.hexToRgb(colors.value.primary, 0.8)
	
	const toLogin = (e) =>{
		uni.navigateTo({
			url:'/pages_login/Llogin?current='+e
		})
	}
	
	const toForgotPassword = () => {
		uni.navigateTo({
			url: '/pages_login/forgotPassword'
		})
	}
</script>

<style lang="scss">
	.content {
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.main {
		flex: 1;
		overflow: hidden;
	}
	.foot {
		.each-btn {
			width: 612rpx;
			height: 100rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: bold;
			font-size: 30rpx;
			margin: auto;
		}
		.btn1 {
			color: #FFFFFF;
		}
		.btn2 {
			margin-top: 38rpx;
		}
		.text {
			font-weight: 500;
			font-size: 26rpx;
			color: #A7A7A9;
			margin: 56rpx 0 120rpx 0;
		}
	}
	.logo {
		width: 180rpx;
		height: 180rpx;
		background: #D9D9D9;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		margin: auto;
		margin-top: 227rpx;
		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
		}
	}
	.title {
		font-weight: bold;
		font-size: 54rpx;
		color: #242329;
		text-align: center;
		margin-top: 64rpx;
	}
	.text {
		font-weight: 400;
		font-size: 28rpx;
		color: #66656A;
		text-align: center;
		margin-top: 20rpx;
	}
</style>
